.card {
    display: flex;
    flex-direction: column;
    height: max-content;
    background-color: $card-bg;
    border-radius: $border-radius;
    overflow: hidden;
    cursor: pointer;

    &-image {
        background-color: $card-image-bg;
    }

    &-info {
        display: flex;
        flex-direction: column;
        gap: $space-l;
        margin: $space-xl $space-xs;
    }

    &-description {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: $space-xxs;
    }

    &-footer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: $space-xxs;

        &:not(:has(> .contentSlot)) {
            justify-content: flex-end;
        }
    }

    &:hover {
        box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.25);
    }
}
